<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>1F钢架E化方案 - 后台管理 - 角色列表</title>
<%@include file="/WEB-INF/common/css.jsp"%>
<style>
  	#machineList{
  		background: #5bc184;
  		width: 90%;
  		padding: 14px;
  		padding-bottom: 14px;
  		margin: 0 20px;
  		display: block;
  		box-shadow: 0 4px 15px #333;
  	}
  	@-webkit-keyframes Glow {
	    from {
	        text-shadow: 0 0 10px #fff,
	                     0 0 20px #fff,
	                     0 0 30px #fff,
	                     0 0 40px #00a67c,
	                     0 0 70px #00a67c,
	                     0 0 80px #00a67c,
	                     0 0 100px #00a67c,
	                     0 0 150px #00a67c;
	    }
	    to {
	        text-shadow: 0 0 5px #fff,
	                     0 0 10px #fff,
	                     0 0 15px #fff,
	                     0 0 20px #00a67c,
	                     0 0 35px #00a67c,
	                     0 0 40px #00a67c,
	                     0 0 50px #00a67c,
	                     0 0 75px #00a67c;
	    }
	}
  	#machineList a{
  		color: #fff;
    	font-size: 17px;
    	margin: 10px;
    	transition: all 1.5s ease;
  	}
  	#machineList a:hover{
  		box-reflect: below;
  		animation: Glow 1.5s ease infinite alternate;
  	}
  	.mylist tbody tr:hover{
  		background: #fff;
  	}
  </style>
<%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<%@include file="/WEB-INF/common/admin/header.jsp"%>
		<%@include file="/WEB-INF/common/admin/menu.jsp"%>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<br><br>
	    	<span id="machineList">
	    	
			</span>
			<div style="padding: 15px;">
				<h3 class="layui-bg-cyan" style="height: 50px;line-height: 50px;padding-left: 5px">1F钢架E化数据表</h3>
				<hr>
				<div>
					<div class="layui-row">
						<button class="layui-btn" onclick="openAddAlert()">
							<i class="layui-icon">&#xe608;</i> 添加数据对应关系
						</button>
					</div>
					<table class="layui-table" id="listshow">
						<thead>
							<tr class="layui-bg-green">
								<th>机种</th>
								<th>类型</th>
								<th>状态</th>
								<th>CUM</th>
								<th>暂放状态</th>
								<th>Total</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
					<div id="pager"></div>
				</div>
			</div>
		</div>

		<%@include file="/WEB-INF/common/admin/footer.jsp"%>

	</div>

	<form id="addAlert" class="layui-form" action=""
		style="margin: 5px; display: none" lay-filter="add">
		<div class="layui-form-item">
			<label class="layui-form-label">机种</label>
			<div class="layui-input-block">
				<select name="dataMachineId" id="machine" lay-verify="required">
			        
			    </select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">项目</label>
			<div class="layui-input-block">
				<select name="dataItemId" id="item" lay-verify="required">
			        
			    </select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<select name="dataGJEHStateId" id="gjehState" lay-verify="required">
			        
			    </select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">暂放状态</label>
			<div class="layui-input-block">
				<select name="dataTempputStateId" id="tempputState" lay-verify="required">
			        
			    </select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">数量</label>
			<div class="layui-input-block">
				<input type="number" name="num" required lay-verify="required"
					placeholder="请输入num" autocomplete="off" class="layui-input" value="0">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">添加</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<form id="updateAlert" class="layui-form" action=""
		style="margin: 5px; display: none" lay-filter="update">
		<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">钢架状态名称</label>
			<div class="layui-input-block">
				<input type="text" name="name" required lay-verify="required"
					placeholder="请输入角色" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">钢架状态排序</label>
			<div class="layui-input-block">
				<input type="number" name="sort" required lay-verify="required"
					placeholder="请输入钢架状态排序" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea name="beizhu" placeholder="备注"
					class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="update">更新</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	
	<%@include file="/WEB-INF/common/bottomjs.jsp"%>
	<script>
	
	function openAddAlert(){
		layer.open({
			type: 1,
			content: $('#addAlert'),
			area: ['500px', '600px'],
			cancel: function(e){
				$("#addAlert").hide();
			}
		});
	}
	
	function initAlert(){
		$("#addAlert").hide();
		$("#updateAlert").hide();
		var form = layui.form;
	  	//监听提交
	  	form.on('submit(add)', function(data){
	    	$.ajax({
	        	url:"${base}/api/dataSummary/add.api",
	        	type: "post",
	        	headers: Apicheck.getHeaders(),
	        	data: data.field,
	        	success: function(result){
	        		if(result.code == 1001){
	        			layer.msg(result.msg, {icon:6});
	        			//showData();
	        		}else{
	        			layer.msg(result.msg, {icon:5,anim:6});
	        		}
	        	}
	        });
	    	return false;
	  	});
	  	
	  	form.on('submit(update)', function(data){
	    	$.ajax({
	        	url:"${base}/api/dataGJEHState/update.api",
	        	type: "post",
	        	headers: Apicheck.getHeaders(),
	        	data: data.field,
	        	success: function(result){
	        		if(result.code == 1001){
	        			layer.msg(result.msg, {icon:6});
	        			//showData(page, size);
	        		}else{
	        			layer.msg(result.msg, {icon:5,anim:6});
	        		}
	        	}
	        });
	    	return false;
	  	});
	}
	
	function initForm(){
		$.ajax({
			url:"${base}/api/dataMachine/list.api",
	    	type: "post",
	    	headers: Apicheck.getHeaders(),
	    	data: {page: 1,size: 1000},
	    	success: function(result){
	    		$("#machine").html("");
	    		$("#machine").append("<option value=''></option>");
	    		var list = result.data.list;
	    		for(var i = 0; i < list.length; i ++){
	    			$("#machine").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
	    		}
	    		layui.form.render("select", "add");
	    	}
		});
		$.ajax({
			url:"${base}/api/dataItem/list.api",
	    	type: "post",
	    	headers: Apicheck.getHeaders(),
	    	data: {page: 1,size: 1000},
	    	success: function(result){
	    		$("#item").html("");
	    		$("#item").append("<option value=''></option>");
	    		var list = result.data.list;
	    		for(var i = 0; i < list.length; i ++){
	    			$("#item").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
	    		}
	    		layui.form.render("select", "add");
	    	}
		});
		$.ajax({
			url:"${base}/api/dataGJEHState/list.api",
	    	type: "post",
	    	headers: Apicheck.getHeaders(),
	    	data: {page: 1,size: 1000},
	    	success: function(result){
	    		$("#gjehState").html("");
	    		$("#gjehState").append("<option value=''></option>");
	    		var list = result.data.list;
	    		for(var i = 0; i < list.length; i ++){
	    			$("#gjehState").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
	    		}
	    		layui.form.render("select", "add");
	    	}
		});
		$.ajax({
			url:"${base}/api/dataTempputState/list.api",
	    	type: "post",
	    	headers: Apicheck.getHeaders(),
	    	data: {page: 1,size: 1000},
	    	success: function(result){
	    		$("#tempputState").html("");
	    		$("#tempputState").append("<option value=''></option>");
	    		var list = result.data.list;
	    		for(var i = 0; i < list.length; i ++){
	    			$("#tempputState").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
	    		}
	    		layui.form.render("select", "add");
	    	}
		});
	}
	
	function showData(id){
		machineId = id;
		$("#listshow tbody").html("");
		$.ajax({
			url:"${base}/api/dataSummary/list.api",
	    	type: "post",
	    	data: {machineId, id},
	    	headers: Apicheck.getHeaders(),
	    	success: function(result){
	    		var xtable = new XTable();
	    		xtable.setOption({
	    			type: XTable.LEFT_CASCADE,
	    			buttons:[{
	    				name: "查看添加历史记录",
	    				class: "layui-btn layui-btn-success",
	    				click: function(e){
	    					layer.open({
	    						type: 1,
	    						content: e.target.info,
	    						area: ['500px', '600px'],
	    						cancel: function(e){
	    							
	    						}
	    					});
	    				}
	    			},{
	    				name: "删除",
	    				class: "layui-btn layui-btn-danger",
	    				click: function(e){
	    					console.log(e);
	    					var deleteOk = layer.open({
    						   title: '数据项删除'
    						   ,content: '真要删吗?，千万别手残咯'
    						   ,yes: function(index, layero){
    							   $.ajax({
    							    	url:"${base}/api/dataSummary/delete.api",
    							    	type: "post",
    							    	headers: Apicheck.getHeaders(),
    							    	data: {dataMachineId: e.target.dataMachineId
    							    		, dataItemId: e.target.dataItemId
    							    		, dataGJEHStateId: e.target.dataGJEHStateId
    							    		, dataTempputStateId: e.target.dataTempputStateId
    							    	},
    							    	success: function(result){
    							    		if(result.code == 1001){
    							    			showData(machineId);
    							    			layer.close(deleteOk);
    							    		}else{
    							    			layer.msg(result.msg, {icon:5,anim:6});
    							    		}
    							    	}
    							    });
    						   }
    						});
	    				}
	    			}],
	    			data: [result.data]
	    		});
	    		console.log(xtable.getOption());
	    		xtable.show("listshow");
	    	}
		});
	}
	var machineId = 1;
	$(function(){
		initAlert();
		initForm();
		showData(machineId);
		
		$.ajax({
			url:"${base}/api/dataSummary/findMachinesNoNeedLogin.api",
			type: "post",
			headers: Apicheck.getHeaders(),
			success: function(result){
				console.log(result)
				var html = "";
				for(var i = 0; i < result.data.length; i ++){
					html += "<a href='#' onclick='showData("+result.data[i].id+")'>"+result.data[i].name+"</a>";
				}
				$("#machineList").html(html);
				var element = layui.element;
			}
		});
	})
</script>
</body>
</html>